import React, { Component } from 'react';
import { View, Text, FlatList, ScrollView } from 'react-native';
import { observer } from 'mobx-react';
import { Scene } from 'react-native-router-flux';
import navBarStyle from '../../../components/navBarStyle';
import activity from '../models/activity';
import Separtor from '../../../components/separtor';
import { age, addStars } from '../../../utils';
import styles from "./styles";

@observer
class ActivityData extends Component {
  renderItem = ({ item }) => {
    const { customerName, customerGender, customerBirthday, customerMobile, subscriptionAmount } = item;
    return (
      <View style={styles.item}>
        <View style={styles.info}>
          <Text style={styles.name}>{customerName}</Text>
          <Text style={styles.other}>{customerGender === 1 ? '男' : '女'}</Text>
          {customerBirthday ? <Text style={styles.other}>{age(customerBirthday)}</Text> : null}
          {subscriptionAmount ? <Text style={styles.other}>{addStars(customerMobile, 3, 6)}</Text> : null}
        </View>
        <Text style={styles.mobile}>{subscriptionAmount}元</Text>
      </View >
    );
  }
  render() {
    return (
      <View style={styles.wrap}>
        <Text style={styles.title}>
          在活动 {this.props.store.data.title}
          中我提交了 {this.props.store.eventData.data && this.props.store.eventData.data.length || 0}
          条数据
        </Text>
        <ScrollView style={{ flex: 1 }}>
          <FlatList
            style={styles.list}
            data={this.props.store.eventData.data}
            renderItem={this.renderItem}
            keyExtractor={(item, index) => `avtivityData_${index}`}
            ItemSeparatorComponent={Separtor}
            ListEmptyComponent={<Text>没有结果</Text>}
          />
        </ScrollView>
      </View>
    );
  }
}

module.exports = (
  <Scene
    key="activityData"
    component={ActivityData}
    title="我提交的"
    path="/activityData/:id"
    hideTabBar
    {...navBarStyle}
    store={activity}
    onEnter={({ eventId }) => activity.getEventData(eventId)}
  />
);
